<template>
	<view class="category-container">
		<view class="content">
			<scroll-view scroll-y class="category-list">
				<view 
					class="category-item" 
					v-for="(item, index) in categoryList" 
					:key="index"
					@click="selectCategory(item)"
					:class="{ active: currentCategory.id === item.id }"
				>
					<image :src="item.icon" class="category-icon"></image>
					<text class="category-name">{{ item.name }}</text>
				</view>
			</scroll-view>
			
			<scroll-view scroll-y class="product-list">
				<view class="section-header">
					<text class="section-title">{{ currentCategory.name }}</text>
				</view>
				<view class="product-list-content">
					<view class="product-item" v-for="(item, index) in productList" :key="index">
						<view class="product-left" @click="goToDetail(item)">
							<image :src="item.image" class="product-image"></image>
						</view>
						<view class="product-right" @click="goToDetail(item)">
							<view class="product-name">{{ item.name }}</view>
							<view class="product-price-section">
								<text class="product-original-price">¥{{ item.originalPrice }}</text>
								<text class="product-discount-price">¥{{ item.discountPrice }}/{{ item.unit }}</text>
							</view>
							<view class="product-sold">已售{{ item.soldCount }}件</view>
							<view v-if="getItemQuantity(item.id) === 0" class="add-cart-btn" @click.stop="addToCart(item)">加入购物车</view>
							<view v-else class="quantity-control">
								<view class="quantity-btn" @click.stop="decreaseQuantity(item)">-</view>
								<view class="quantity-num">{{ getItemQuantity(item.id) }}</view>
								<view class="quantity-btn" @click.stop="increaseQuantity(item)">+</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import auth from '@/utils/auth.js'

export default {
	data() {
		return {
			categoryList: [
				{
					id: 1,
					name: '猪肉丸',
					icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F1660314386%2FO1CN011FyzpL1iGppwfxqQY_%21%211660314386.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763471848&t=dc4b7df2417a3d839dadacbc389e9cd5'
				},
				{
					id: 2,
					name: '仙人板',
					icon: 'https://img14.360buyimg.com/pop/jfs/t1/158199/35/20921/93931/607fced3E9509afc0/f40fbed1105b70a9.jpg'
				},
				{
					id: 3,
					name: '肉肠',
					icon: 'https://img0.baidu.com/it/u=3952203451,478744648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
				},
				{
					id: 4,
					name: '猪肉干',
					icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2FTB19uqsUwHqK1RjSZFPSuwwapXa.jpg_310x310.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763473392&t=b660bfa175cf46756194797db6c42381'
				}
			],
			currentCategory: { id: 1, name: '猪肉丸' },
			productList: [
				{ 
					id: 101, 
					name: '兴宁手打猪肉丸', 
					originalPrice: 5999,
					discountPrice: 4999,
					soldCount: 128,
					count: 0,
					unit: '斤',
					image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
				},
				{ 
					id: 102, 
					name: '精选猪肉丸', 
					originalPrice: 6999,
					discountPrice: 5999,
					soldCount: 89,
					count: 0,
					unit: '斤',
					image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
				},
				{ 
					id: 103, 
					name: '特制猪肉丸', 
					originalPrice: 7999,
					discountPrice: 6999,
					soldCount: 67,
					count: 0,
					unit: '斤',
					image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
				},
				{ 
					id: 104, 
					name: '手工猪肉丸', 
					originalPrice: 8999,
					discountPrice: 7999,
					soldCount: 45,
					count: 0,
					unit: '斤',
					image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
				}
			]
		}
	},
	computed: {
			// 映射购物车相关的状态和getters
			...mapState('cart', ['cartItems']),
			...mapGetters('cart', ['getItemQuantity'])
		},
		onLoad() {
		this.loadCategoryData()
		this.initCart()
	},
	onShow() {
		// 每次显示页面时刷新数据
		this.initCart()
	},
	methods: {
		// 映射购物车相关的actions
		...mapActions('cart', ['addToCart', 'updateQuantity', 'removeFromCart', 'initCart']),
		// 加载分类数据
		loadCategoryData() {
			// 这里可以调用API获取分类数据
			console.log('加载分类数据')
		},
		
		// 选择分类
		selectCategory(category) {
			this.currentCategory = category
			this.loadProductList()
		},
		
		// 加载商品列表
		loadProductList() {
			// 根据不同分类加载不同的商品数据
			if (this.currentCategory.id === 1) {
				// 猪肉丸分类
				this.productList = [
					{ 
						id: 101, 
						name: '兴宁手打猪肉丸', 
						originalPrice: 5999,
						discountPrice: 4999,
						soldCount: 128,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
					},
					{ 
						id: 102, 
						name: '精选猪肉丸', 
						originalPrice: 6999,
						discountPrice: 5999,
						soldCount: 89,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
					},
					{ 
						id: 103, 
						name: '特制猪肉丸', 
						originalPrice: 7999,
						discountPrice: 6999,
						soldCount: 67,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
					},
					{ 
						id: 104, 
						name: '手工猪肉丸', 
						originalPrice: 8999,
						discountPrice: 7999,
						soldCount: 45,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
					}
				]
			} else if (this.currentCategory.id === 2) {
				// 仙人板分类
				this.productList = [
					{ 
						id: 201, 
						name: '自家做的仙人板', 
						originalPrice: 149,
						discountPrice: 99,
						soldCount: 256,
						count: 0,
						unit: '碗',
						image: 'https://qcloud.dpfile.com/pc/Z1XbyrAyCWz1qqscp3gTNrC2EIqbevu6XaPpnfpH4cyOy49x-iCOD4mvVJcr1l6I.jpg'
					},
					{ 
						id: 202, 
						name: '传统仙人板', 
						originalPrice: 199,
						discountPrice: 149,
						soldCount: 178,
						count: 0,
						unit: '碗',
						image: 'https://qcloud.dpfile.com/pc/Z1XbyrAyCWz1qqscp3gTNrC2EIqbevu6XaPpnfpH4cyOy49x-iCOD4mvVJcr1l6I.jpg'
					},
					{ 
						id: 203, 
						name: '特制仙人板', 
						originalPrice: 249,
						discountPrice: 199,
						soldCount: 92,
						count: 0,
						unit: '碗',
						image: 'https://qcloud.dpfile.com/pc/Z1XbyrAyCWz1qqscp3gTNrC2EIqbevu6XaPpnfpH4cyOy49x-iCOD4mvVJcr1l6I.jpg'
					}
				]
			} else if (this.currentCategory.id === 3) {
				// 肉肠分类
				this.productList = [
					{ 
						id: 301, 
						name: '自家做的肉肠', 
						originalPrice: 499,
						discountPrice: 399,
						soldCount: 67,
						count: 0,
						unit: '斤',
						image: 'https://img0.baidu.com/it/u=3364154920,628749022&fm=253&app=138&f=JPEG?w=500&h=500'
					},
					{ 
						id: 302, 
						name: '传统肉肠', 
						originalPrice: 599,
						discountPrice: 499,
						soldCount: 45,
						count: 0,
						unit: '斤',
						image: 'https://img0.baidu.com/it/u=3364154920,628749022&fm=253&app=138&f=JPEG?w=500&h=500'
					},
					{ 
						id: 303, 
						name: '特制肉肠', 
						originalPrice: 699,
						discountPrice: 599,
						soldCount: 38,
						count: 0,
						unit: '斤',
						image: 'https://img0.baidu.com/it/u=3364154920,628749022&fm=253&app=138&f=JPEG?w=500&h=500'
					}
				]
			} else if (this.currentCategory.id === 4) {
				// 猪肉干分类
				this.productList = [
					{ 
						id: 401, 
						name: '自家晒的猪肉干', 
						originalPrice: 399,
						discountPrice: 299,
						soldCount: 89,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/241216/dump/279b49f325fde86015838cea70e4db79.jpeg'
					},
					{ 
						id: 402, 
						name: '传统猪肉干', 
						originalPrice: 499,
						discountPrice: 399,
						soldCount: 67,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/241216/dump/279b49f325fde86015838cea70e4db79.jpeg'
					},
					{ 
						id: 403, 
						name: '特制猪肉干', 
						originalPrice: 599,
						discountPrice: 499,
						soldCount: 45,
						count: 0,
						unit: '斤',
						image: 'https://pic.rmb.bdstatic.com/bjh/241216/dump/279b49f325fde86015838cea70e4db79.jpeg'
					}
				]
			}
			console.log('加载分类商品数据:', this.currentCategory.name)
		},
		
		// 跳转到商品详情
		goToDetail(product) {
			uni.navigateTo({
				url: `/pages/product/detail?id=${product.id}`
			})
		},
		
		// 添加到购物车
		addToCart(item) {
			// 检查登录状态
			if (!auth.checkLoginAndRedirect(auth.getCurrentPageFullPath())) {
				return
			}
			
			this.$store.dispatch('cart/addToCart', {
				id: item.id,
				name: item.name,
				price: item.discountPrice,
				image: item.image,
				quantity: 1
			})
			uni.showToast({
				title: '已添加到购物车',
				icon: 'success'
			})
		},
		
		// 增加数量
		increaseQuantity(item) {
			// 检查登录状态
			if (!auth.checkLoginAndRedirect(auth.getCurrentPageFullPath())) {
				return
			}
			
			this.updateQuantity({
				id: item.id,
				quantity: this.getItemQuantity(item.id) + 1
			})
		},
		
		// 减少数量
		decreaseQuantity(item) {
			const currentQuantity = this.getItemQuantity(item.id)
			if (currentQuantity > 1) {
				this.updateQuantity({
					id: item.id,
					quantity: currentQuantity - 1
				})
			} else if (currentQuantity === 1) {
				// 如果数量为1，则从购物车中移除
				this.removeFromCart({
					id: item.id
				})
			}
		}
	}
}
</script>

<style>
.category-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.content {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.category-list {
	width: 200rpx;
	background-color: #fff;
	border-right: 1px solid #eee;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.category-item.active {
	background-color: #f5f5f5;
	color: #e93b3d;
}

.category-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 26rpx;
	color: #333;
}

.product-list {
	flex: 1;
	background-color: #fff;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.product-list-content {
	display: flex;
	flex-direction: column;
}

.product-item {
	display: flex;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-left {
	flex: 0 0 200rpx;
	margin-right: 20rpx;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
}

.product-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 40rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-price-section {
	margin-bottom: 15rpx;
}

.product-original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
	margin-right: 10rpx;
}

.product-discount-price {
	font-size: 32rpx;
	color: #e93b3d;
	font-weight: bold;
}

.product-sold {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 15rpx;
}

.add-cart-btn {
	background-color: #e93b3d;
	color: #fff;
	border: none;
	border-radius: 30rpx;
	padding: 12rpx 25rpx;
	font-size: 24rpx;
	text-align: center;
	align-self: flex-start;
}

.quantity-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 150rpx;
	align-self: flex-start;
}

.quantity-btn {
	width: 45rpx;
	height: 45rpx;
	border-radius: 50%;
	background-color: #e93b3d;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
}

.quantity-num {
	font-size: 30rpx;
	color: #333;
	min-width: 40rpx;
	text-align: center;
}
</style>